<template>
    <transition name="slide">
        <div class="popup" v-if="isshow">    
            <div class="content">
                <slot></slot>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
  name: "popup",
  data() {
    return {
      isshow: false
    };
  },
  watch:{
    isshow(val){
      if(val){
        this.$emit('popupHasShow',val)
      }
    }
  },
  methods: {
    show() {
      this.isshow = true;
    },
    hide() {
      this.isshow = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.popup {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
  left: 0;
  top: 0;
//   border: 1px solid red;
}
.slide-enter-active,.slide-leave-active{
    transition:all .3s linear;
}
.slide-enter,.slide-leave-to{
    top:100%;
}
</style>

